<template>
  <!-- 用户中心用户个人信息 -->
  <div class="container userCenterBanner">
    <div class="row">
      <div class="col-12 col-md-10 offset-md-1 my-3 bg-white">
        <div class="row box">
          <div class="p-2 col-12 col-md-3 d-flex flex-column align-items-center leftBox">
            <img :src="userImg" class="rounded-circle userImg my-2" alt="">

            <!-- 修改头像 -->
            <button class="btn btn-sm btn-outline-secondary" v-if="!hiddenUserImg" @click="changeHidden">修改头像</button>
            
            <div v-if="hiddenUserImg">
              <form id="userForm" action="https://www.zengpengxi.com/data/userImg.php" method="post" enctype="multipart/form-data" target="stop">
                <input type="file" name="headImg" accept="image/*" capture="camera" class="btn-sm" style="width: 80px;" id="file" @change="doSelect">
                <input type="submit" class="btn btn-sm btn-outline-success mx-1" value="修改" @click="doModify" :disabled="clickFlag">
                <button class="btn btn-sm btn-outline-danger" @click="doClear">取消</button>
                <img src="" id="theImg" alt="">
              </form>
              <!-- 防止跳转 -->
              <iframe name="stop" style="display:none;"></iframe>  
            </div>

            <p class="lead"  @click="getNowUserData">{{this.$store.state.loginState}}
              <router-link to="/controlCenter" class="badge ml-2 initBgColor" :class="{'user': users, 'root': roots}">
                {{userStateName}}
              </router-link>
            </p>
          </div>
          <div class="col-12 col-md-9">
            <!-- 定义用户自定义信息 -->
            <user-center-setting class="mt-md-2" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import UserCenterSetting from './UserCenterSetting.vue'

  export default {
    name: 'UserCenterBanner',
    components: {
      UserCenterSetting
    },
    data () {
      return {
        isRouterAlive: true,
        clickFlag: true,  //判断是否开启上传文件按钮
        hiddenUserImg: false,  //判断是否隐藏修改头像功能
        stateFlag: JSON.parse(localStorage.getItem('userInformation')).root,  // 当前本地用户的权限
        userStateName: '',  //用户权限状态
        user: '',
        root: '',
        getUserData: {
          id: JSON.parse(localStorage.getItem('userInformation')).id,
          table: 'user'
        }
      }
    },
    // 注入
    provide() {
      return {
        reload: this.reload
      }
    },
    methods: {
      // 注入判断是否隐藏组件触发组件刷新
      reload() {
        this.isRouterAlive = false;
        setTimeout(() => {
          this.isRouterAlive = true;
        }, 100)
      },
      getNowUserData() {
        // 判断本地用户是否存在，成功则跳转控制中心
        if (localStorage.getItem('userInformation')) {
          // 发送用户Id得到用户数据
          this.$store.dispatch('asynHasIdGetUser', this.getUserData);
          setTimeout(() => {
            if (this.$store.state.getChangeUserData) {
              // 更新用户数据
              localStorage.setItem('userInformation', JSON.stringify(this.$store.state.getChangeUserData));
            }
          }, 200);
        }
      },
      // 修改图片
      doModify() {
        // 读取图片文件
        let userForm = document.getElementById("userForm");
        let formdata = new FormData(userForm);
        let headImg = formdata.get('headImg');

        // 设置上传信息
        let setUserImg = {
          id: JSON.parse(localStorage.getItem('userInformation')).id,
          name: headImg.name
        }
        this.$store.dispatch('asynUserImg', setUserImg);
        // 修改图片后更新本地数据
        setTimeout(() => {
          this.$store.dispatch('asynHasIdGetUser', this.getUserData);
          setTimeout(() => {
            if (this.$store.state.getChangeUserData) {
              // 成功后改变本地用户数据
              localStorage.setItem('userInformation', JSON.stringify(this.$store.state.getChangeUserData));
              alert('修改成功');
              window.location.reload();
            }
          }, 300);
        }, 500 )
      },
      // 决定是否修改头像
      changeHidden() {
        this.hiddenUserImg = true;
      },
      // 选择文件
      doSelect() {
        this.clickFlag = false;
      },
      // 取消修改头像
      doClear() {
        this.clickFlag = true;
        this.hiddenUserImg = false;
      }
    },
    mounted() {
      // 判断用户状态字符
      if (this.stateFlag  === 'false') {
        this.userStateName = '普通用户';
      } else {
        this.userStateName = '管理员';
      }
      this.hiddenUserImg = false;
    },
    computed: {
      // 判断用户的权限改变其样式
      users() {
        return this.stateFlag  === 'false' ? this.user = true : this.user = false;
      },
      roots() {
        return this.stateFlag  === 'true' ? this.root = true : this.root = false;
      },
      // 返回拼接后的图片地址
      userImg() {
        let str = 'https://www.zengpengxi.com/userImg/';
        let img = JSON.parse(localStorage.getItem('userInformation')).img;

        return str + img;
      }
    }
  }
</script>

<style scoped>
  .box {
    min-height: 300px;
  }

  .userImg {
    width: 150px;
    height: 150px;
    margin: 0 auto;
  }

  .user, .initBgColor {
    color: #FFF;
    font-size: .725em;
    background-color: #333;
  }
  
  .root {
    color: rgb(212, 0, 1);
    background-color: rgb(254, 221, 101);
  }
</style>